import React, { Component } from 'react'
import "./App.css"
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
export default class App extends Component {
  // footer清除所有完成项的回调
  // 接收的参数为,不需要删除的列表
  saveListType = (willSaveList) => {
    this.setState({todos: willSaveList})
  }
  // Item组件 删除 的回调
  removeItem = (id) => {
    const { todos } = this.state
    const newTodos = todos.filter(todo => {
      return todo.id !== id
    })
    console.log(newTodos)
    this.setState({todos: newTodos})
  } 
  // Item组件 调用的更改选择状态的回调函数
  changeChecked = (id, value) => {
    console.log(id, value)
    const {todos} = this.state
 
    const newTodos = todos.map(todo => {
      if(todo.id === id) {
        return todo = {...todo, value: value}
      }else {
        return todo
      }
    })
    this.setState({todos: newTodos})

  }

  // List组件 调用的回调函数
  addValue = (name) => {
    // 如果为空 暂停
    if(!(name.trim())) return
    const {todos} = this.state
    const todo = {id:todos.length, name: name, value: false}
    this.setState({todos: [todo, ...todos]})
  }
  state = {todos: [
    {id:'001', name:'吃饭', value:false},
    {id:'002', name:'睡觉', value:true},
    {id:'003', name:'敲代码', value:false},

  ]}
  render() {
    const { todos } = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addValue={this.addValue}/>
          <List removeItem={this.removeItem} changeChecked={this.changeChecked} todos={todos}/>
          <Footer saveListType={this.saveListType} todos={todos} />
        </div>
      </div>
    )
  }
}
